<template>
  <div class="content" v-loading="loading">
    <div class="inputLine flexBet">
      <el-input
        style="width: 320px"
        v-model="queryParams.fileName"
        placeholder="请输入文件名称"
        clearable
        @keyup.enter.native="getList"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="flex">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
        >重置
        </el-button>
      </div>
    </div>
    <div class="box" v-if="list.length > 0">
      <div
        @click="openfile(item.fileUrl, item.fileName)"
        class="file flexColCenter rela"
        v-for="(item, index) in list"
        :key="index"
      >
        <img class="icon" :src="returnIcon(item.fileUrl, 1)" alt=""/>

        <div
          class="filename flexColCenter"
          style="max-width: calc(100% - 639px)"
        >
          <tooltip :text="item.fileName" width="100%"></tooltip>
        </div>
        <div class="type">{{ item.extension }}</div>
        <div class="flexColCenter absolute" style="right: 0; padding-right: 143px">
          <div class="uploadUser">{{ item.createByName }}</div>
          <div class="time">{{ parseTime(item.createTime) }}</div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无资料"></el-empty>
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
      :isHttps="isHttps"
    ></fileDrawer>
    <!-- <div class="pageLine flexEnd flexColCenter">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :page-size="10"
        :current-page="1"
      />
    </div> -->
  </div>
</template>

<script>
import fileDrawer from '@/components/fileDrawer.vue'
import { returnIcon } from '@/utils/util.js'
import { branchDisciplineFileList } from '@/api/disciplineGroup/disciplineGroup'
import { parseTime } from '@/utils/cc'

export default {
  components: { fileDrawer },
  props: {
    activeIndex: [Number, String]
  },
  data() {
    return {
      isHttps: false,
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      },
      loading: false,
      list: [],
      queryParams: {
        fileName: ''
      }
    }
  },
  watch: {
    activeIndex: {
      handler(val) {
        console.log('activeIndex', val)
        if (val == 2) {
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    parseTime,
    /* 打开文件 */
    openfile(url, name) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (arr.indexOf(uploadType) > -1) {
        this.drawer = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = 1
      } else {
        window.open(url, '_blank')
      }
    },
    handleQuery() {
    },
    async getList() {
      try {
        this.loading = true
        const res = await branchDisciplineFileList({
          disciplineGroupId: this.$route.query.disciplineGroupId,
          fileName: this.queryParams.fileName
        })
        if (res.code == 200) {
          this.list = res.data
          this.list.map((item) => {
            const lastDotIndex = item.fileName.lastIndexOf('.')
            const name = item.fileName.slice(0, lastDotIndex) // 文件名部分
            const extension = item.fileName.slice(lastDotIndex) // 扩展名部分（包括点号）
            item.fileName = name
            item.extension = extension
            item.edit = false
          })
        }
      } finally {
        this.loading = false
      }
    },
    resetSearch() {
      this.queryParams = {
        fileName: ''
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 310px + 80px);
  display: flex;
  box-sizing: border-box;
  flex-direction: column;

  .inputLine {
    padding: 24px 34px 0 42px;
  }

  .box {
    margin: 24px 0 0 0;
    padding: 0 0 0 42px;
    flex: 1;
    overflow-y: auto;
    width: 100%;

    .file:hover,
    .file:focus {
      background: #f5f6f7;
    }

    .file {
      padding: 0 52px 0 10px;
      margin-bottom: 8px;
      height: 48px;

      .icon {
        width: 32px;
        height: 32px;
      }

      .edit {
        background: pink;
        margin-left: 20px;
        width: 16px;
        height: 16px;
      }

      .filename {
        margin-left: 16px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .type {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .uploadUser {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        margin-left: 66px;
      }

      .time {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        margin-left: 130px;
      }
    }
  }

  .pageLine {
    padding: 0 64px 0 0;
    height: 60px;
  }

  .file {
    margin: 0 24px 8px 0;
    height: 48px;
  }
}
</style>
